<script>
import request from "../../../../utils/request"
import { getStaticUrl } from "@/utils/settings"
import { handleUrlParams } from "@/utils"
import rightArrowIcon from "../assets/right-arrow.png"
import banner from "@/components/banner.vue"
export default {
  name: "practiceByQuestionType",
  components: { banner },
  data() {
    return {
      queryParams: {
        classId: "",
        className: "",
      },
      questionTypeList: [], //题型列表
      rightArrowIcon,
    }
  },
  methods: {
    getStaticUrl,
    init(query) {
      this.queryParams.classId = query.classId
      this.queryParams.className = query.className
      //获取题型列表
      request({
        url: "topic/getQuestionTypeList",
        data: this.queryParams,
        showLoading: true,
        errorHandle: true,
      }).then((data) => {
        this.questionTypeList = data
      })
    },
    //题型列表点击
    questionTypeItemClick(item) {
      uni.navigateTo({
        url: handleUrlParams("/practice/pages/chooseStructure/questionTypeDetail/index", {
          classId: this.queryParams.classId,
          className: this.queryParams.className,
          typeCode: item.typeCode,
          typeName: item.typeName,
        }),
      })
    },
  },
}
</script>

<template>
  <view class="component">
    <!--		轮播图-->
    <view style="border-radius: 20rpx; overflow: hidden">
      <banner :position="2" height="200rpx"></banner>
    </view>
    <!--		题型列表-->
    <view class="question-type-list">
      <view class="question-type-item" v-for="item in questionTypeList" :key="item.typeId" @click="questionTypeItemClick(item)">
        <view class="type-name">{{ item.typeName }}</view>
        <image class="right-arrow-icon" :src="rightArrowIcon"></image>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.component {
  padding: {
    left: 30rpx;
    right: 30rpx;
    bottom: calc(30rpx + env(safe-area-inset-bottom));
  }
  .question-type-list {
    padding-top: 30rpx;
    .question-type-item {
      display: flex;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: 2rpx solid #f0f0f0;
      .type-name {
        font-size: 32rpx;
        font-weight: bold;
      }
      .right-arrow-icon {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}
</style>
